<template>
  <div class="home">
    <div class="side">
      <el-menu
        active-text-color="#1baeae"
        background-color="#222832"
        class="el-menu-vertical-demo"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        @select="indexOpen"
        router
      >
        <div class="top">
          <img
            src="https://s.weituibao.com/1582958061265/mlogo.png"
            alt="logo"
          />
          <div class="title">vue3 admin</div>
        </div>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Dashboard</span>
          </template>
          <el-menu-item index="/introduce">系统介绍</el-menu-item>
          <el-menu-item index="/dashboard">Dashboard</el-menu-item>
          <el-menu-item index="/add">添加商品</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><icon-menu /></el-icon>
            <span>首页配置</span>
          </template>
          <el-menu-item index="/swiper">轮播图配置</el-menu-item>
          <el-menu-item index="/hot">热销商品配置</el-menu-item>
          <el-menu-item index="/new">新品上线配置</el-menu-item>
          <el-menu-item index="/recommend">为你推荐配置</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><document /></el-icon>
            <span>模块管理</span>
          </template>
          <el-menu-item index="/category">分类管理</el-menu-item>
          <el-menu-item index="/good">商品管理</el-menu-item>
          <el-menu-item index="/guest">会员管理</el-menu-item>
          <el-menu-item index="/order">订单管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/account">修改密码</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <div class="main">
      <div class="header">
        <div class="left">
          <span style="font-size: 20px">{{thisPage}}</span>
        </div>
        <div class="right">
          <div class="author">
            <el-icon><Avatar /></el-icon> 十三
            <el-icon><CaretBottom /></el-icon>
          </div>
        </div>
      </div>
      <div class="content">
          <!-- 页面详情 -->
          <router-view></router-view>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import {ref, reactive ,onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Avatar,
  CaretBottom,
} from "@element-plus/icons-vue";

const router = useRouter();

const asideList = reactive([
    {
        index:"/introduce",
        title:"系统介绍"
    },
    {
        index:"/dashboard",
        title:"大盘数据"
    },
    {
        index:"/add",
        title:"添加商品"
    },
    
    {
        index:"/swiper",
        title:"轮播图配置"
    },
    {
        index:"/hot",
        title:"热销商品配置"
    },
    {
        index:"/new",
        title:"新品上线配置"
    },
    {
        index:"/recommend",
        title:"为你推荐配置"
    },

    
    {
        index:"/category",
        title:"分类管理"
    },
    {
        index:"/good",
        title:"商品管理"
    },
    {
        index:"/guest",
        title:"会员管理"
    },
    {
        index:"/order",
        title:"订单管理"
    },

    
    {
        index:"/account",
        title:"修改密码"
    },
])
let thisPage = ref("")

const uid = router.currentRoute.value.path
function first(index){
  
  let id = asideList.findIndex(item=>{
        return item.index==index
    })
    thisPage.value = asideList[id].title
    console.log(thisPage);
}
first(uid)

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
//   asideList.findIndex(item=>{
//     return item
//   })

};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
const indexOpen = (index,indexPath) =>{
    console.log(index,indexPath);
    first(index)
}
</script>
  
  <style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  display: flex;

  .side {
    width: 200px;
    display: flex;
    .top {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      .title {
        font-size: 20px;
        color: #fff;
      }
    }
    .el-menu-vertical-demo {
      flex: 1;
    }
  }
  .main {
    flex: 1;
    .header {
      height: 50px;
      border-bottom: 1px solid #e9e9e9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
    .content {
      height: calc(100vh - 100px);
      overflow: auto;
      padding: 10px;
    }
  }
}
</style>